<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        常见的父项属性:
            flex-direction: 设置主轴的方向;
            justify-content: 设置主轴的排列方式;
            flex-wrap: 设置子元素是否换行;
            align-content: 设置侧轴上子元素的排列方式(多行);
            align-items: 设置侧轴上的子元素排列方式(单行);
            flex-flow: 复合属性，相当于同时设置了flex-direction和flex-wrap;
    -->
    <!-- 
        我们的元素默认是根据主轴的方向进行排列的。常用一般只有row和column
        flex-direction设置主轴方向:
            row: 从左到右
            row-reverse: 从右到左
            column: 从上到下
            column-reverse: 从下往上
        
     -->
</body>
</html>